<template>
  <div v-loading="loadPage || loadingDownload">
    <el-page-header  @back="$router.back()"></el-page-header>
    <el-button
      type="primary"
      size="mini"
      @click="submitForm('formData')"
      :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
      :disabled="loading"
      v-if="designerList.indexOf($store.getters.userId) !== -1"
    >保存</el-button>
    <el-button
      type="success"
      size="mini"
      :icon="loadingDownload?'el-icon-loading':'el-icon-download'"
      @click="download()"
      :disabled="loadingDownload"
      v-if="formData.resultImgJson.length > 0"
    >下载</el-button>
    <el-button
      type="warning"
      size="mini"
      @click="$refs.version.dialogTableVisible = true"
      icon="el-icon-folder-opened"
    >版本号</el-button>
    <el-button
      type="info"
      size="mini"
      @click="$router.push({ name: 'visualDesignDetails' ,query:$route.query})"
      icon="el-icon-link"
    >详情页</el-button>
    <template v-for="(item,index) in VisionDemandCheckList">
      <span :key="index" v-if="item.userId === $store.getters.userId && isStatus9 == 8  && item.checkStatus === 0 ">
        <el-button type="primary" size="mini" @click="$refs.Review.show($route.query,item,1)">审核通过</el-button>
        <el-button type="danger" size="mini" @click="$refs.Review.show($route.query,item,-1)">审核拒绝</el-button>
      </span>
      <el-alert
         v-else-if="item.userId === $store.getters.userId && isStatus9 === 9 " :key="index"
        title="已完成"
        type="success"
        ></el-alert>
      <el-alert
         v-else-if="item.userId === $store.getters.userId && item.checkStatus === 1 " :key="index"
        title="等待其他审核人通过"
        type="warning"
        ></el-alert>
      <el-alert
         v-else-if="item.userId === $store.getters.userId && item.checkStatus !== 1 && isStatus9 >= 7" :key="index"
        title="审核拒绝"
        type="error"
        ></el-alert>
    </template>
    <el-form
      :model="formData"
      ref="formData"
      label-width="0"
      v-if="isRouterAlive"
      @submit.native.prevent
    >
      <el-form-item
        v-for="(item,index) in formData.resultImgJson"
        :key="index"
        :prop="'resultImgJson.' + index + '.pictureArray'"
        :rules="{required: true, message:  item.title + '图片不能为空', trigger: 'blur'}"
        class="form-item"
      >
        <el-form-item
          label
          :key="index"
          :prop="'resultImgJson.' + index + '.title'"
          :rules="{required: true, message:  '标题不能为空', trigger: 'blur'}"
          label-width="0"
        >
          <span @click.prevent="item.edit = true">
            <template v-if="!item.edit">
              {{index+1}}.
              {{item.title}}
              <i class="el-icon-edit"></i>
            </template>
            <el-input
              v-model="item.title"
              size="mini"
              ref="mark "
              autofocus
              v-focus
              @blur.prevent="editTitle(item)"
              v-else
            ></el-input>
          </span>
        </el-form-item>
        <div class="right">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-download"
            circle
            ref="downList"
            @click.prevent="download(item,index)"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            v-if="designerList.indexOf($store.getters.userId) !== -1"
            @click.prevent="removeResultImgJson(item)"
          ></el-button>
        </div>
        <vision-upload
          ref="upload"
          :imageData="{pathType: 'RESULT_IMG',typeId:'pictureArray',isName:true}"
          :disabled="designerList.indexOf($store.getters.userId) !== -1"
          :item="item"
        ></vision-upload>
      </el-form-item>
      <el-form-item label-width="0" :class="formData.resultImgJson.length  === 0?'border':''">
        <el-button
          v-if="designerList.indexOf($store.getters.userId) !== -1  "
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click.prevent="addResultImgJson"
        >新增窗图</el-button>
        <el-alert
          v-else-if="formData.resultImgJson.length  === 0"
          title="暂无数据"
          type="info"
          center
          show-icon
        ></el-alert>
      </el-form-item>
    </el-form>
    <revealImages-version
      :resultImgList="ResultImgList"
      @getResultImgJson="getResultImgJson"
      ref="version"
    ></revealImages-version>
    <table-Review ref="Review" @loadData="getVisionDemandCheckList(),getvisionDemandStatusById()"></table-Review>
  </div>
</template>
<script>
const ERR_OK = 200;
import visionUpload from "./vision-upload";
import revealImagesVersion from "./revealImages-version";
import tableReview from "./table-Review";
export default {
  data() {
    return {
      loadPage: true,
      isRouterAlive: true,
      loading: false,
      loadingDownload: false,
      formData: {
        resultImgJson: [],
        updateUserId: this.$store.getters.userId,
        versionNumber: 0,
        visionDemandId: this.$route.query.visionDemandId
      },
      ResultImgList: [],
      designerList: [],
      isStatus9: 9,
      VisionDemandCheckList:[]
    };
  },
  created() {
    if (!this.$route.query.visionDemandId) {
      this.$router.push({ path: "/OACenter/visualDesign/demandList" });
    } else {
      this.getResultImgList();
      this.getAssignedTaskPersonListById();
      this.getvisionDemandStatusById();
      this.getVisionDemandCheckList()
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        // 聚焦元素
        el.querySelector("input").focus();
      }
    }
  },
  methods: {
    //编辑标题
    editTitle(item) {
      if (item.title) {
        item.edit = false;
      } else {
        this.$message.error("标题不能为空");
      }
    },
    removeResultImgJson(item) {
      var index = this.formData.resultImgJson.indexOf(item);
      if (index !== -1) {
        this.formData.resultImgJson.splice(index, 1);
        this.IsRouterAlive();
      }
    },
    addResultImgJson() {
      this.formData.resultImgJson.push({
        pictureArray: "",
        title: "主橱窗图",
        edit: false
      });
    },
    //获取版本
    getResultImgList() {
      this.loadPage = true;
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemand/getResultImgList?visionDemandId=" +
            this.$route.query.visionDemandId
        )
        .then(res => {
          this.loadPage = false;
          if (res.data.code === ERR_OK) {
            this.ResultImgList = res.data.data;
            this.getResultImgJson(res.data.data[res.data.data.length - 1]);
          }
        });
    },
    getVisionDemandCheckList(){
        this.VisionDemandCheckList = []
        this.$ajax.get(this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandCheckListByVisionDemandId?visionDemandId=" +
            this.$route.query.visionDemandId).then(res => {
                this.VisionDemandCheckList = res.data.data
            })
    },
    getResultImgJson(item) {
      if (item) {
        this.formData.resultImgJson = JSON.parse(item.resultImgJson);
        this.formData.versionNumber = item.versionNumber;
        this.IsRouterAlive();
      }
    },
    IsRouterAlive() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    //获取设计师权限修改
    getAssignedTaskPersonListById() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandStatus/assignedTaskPersonListById?userId=" +
            this.$store.getters.userId +
            "&visionDemandId=" +
            this.formData.visionDemandId
        )
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.designerList = res.data.data.designerList;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //判断状态是否已完成 不可修改
    getvisionDemandStatusById() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandStatus/getvisionDemandStatusById?visionDemandId=" +
            this.formData.visionDemandId
        )
        .then(res => {
          if (res.data.code === ERR_OK && res.data.data) {
            this.isStatus9 = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //下载
    download(item, index) {
      let IndexOf = "";
      if (item) {
        IndexOf = index;
      }
      this.loadingDownload = true;
      this.$ajax({
        method: "get",
        url:
          this.GLOBAL.oaVisionDemand +
          "/visionDemandUpload/fileDownload?index=" +
          IndexOf +
          "&versionNumber=" +
          this.formData.versionNumber +
          "&visionDemandId=" +
          this.$route.query.visionDemandId
      }).then(res => {
        this.loadingDownload = false;
        if (res.status === ERR_OK) {
          open(res.request.responseURL);
          this.$message.success("下载成功");
        } else {
          this.$message.error("下载失败");
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let formData = JSON.parse(JSON.stringify(this.formData));
          formData.resultImgJson = JSON.stringify(formData.resultImgJson);
          this.$ajax({
            method: "post",
            url: this.GLOBAL.oaVisionDemand + "/visionDemand/saveResultImg",
            data: formData
          }).then(res => {
            this.oading = false;
            if (res.data.code === ERR_OK) {
              this.$message.success("保存成功");
              this.$router.push({ path: "/OACenter/visualDesign/demandList" });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  components: {
    visionUpload,
    revealImagesVersion,
    tableReview
  }
};
</script>
<style lang="stylus" scoped>
.el-page-header {
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
}

.el-form-item {
  margin-top: 15px;
}

.form-item {
  position: relative;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-form-item {
    padding: 0;
    margin: 0 0 10px 0;
    max-width: 250px;

    span {
      display: block;
      line-height: 20px;
      color: #333;
      font-size: 14px;
      font-weight: bold;

      i {
        color: #409eff;
      }
    }
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.border {
  padding: 50px 0;
  text-align: center;
  border: 2px dashed #cccccc;
}
.el-alert{
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
</style>
